<!--
 * @Description: 页头
 * @Author: xinqiao lxq1990.0716@qq.com
 * @Date: 2024-03-07
 * @LastEditors: 颜博骏 bojun@ssc-hn.com
 * @LastEditTime: 2024-06-20
-->
<script lang="ts" setup>
  import { onMounted, reactive, ref } from 'vue'
  import { useRouter } from 'vue-router'

  import { requestPersonalData } from '/@/api/business/company/user'
  import { requestLoginOut } from '/@/api/system/ysys-user/account'
  //import { requestPlatformCompanyInit } from '/@/api/content/platformCompany'
  import { requestSwitch } from '/@/api/system/ysys-user/company'
  import { HttpCodeEnum } from '/@/enums/httpEnum'
  import { HeaderImgEnum } from '/@/enums/img/layoutEnum'
  import { RouterPathEnum } from '/@/enums/routerEnum'
  import { getCompanyInfo, getCompanyList, saveCompanyInfo, savePersonData, saveToken } from '/@/storage'
  import { useMenu } from '/@/store/modules/menu'

  import Password from './password.vue'
  import Personal from './personal.vue'

  const menu = useMenu()
  const router = useRouter()
  const companyInfo = getCompanyInfo()
  const companyId = ref(companyInfo.companyId)
  const companyList: any = ref(getCompanyList())
  const data = ref<PersonalDataTypes.IResponse>({
    userName: '',
    userPhone: '',
  })

  /**
   * 切换机构
   */
  const changeCompany = async (value, options) => {
    saveCompanyInfo({ companyId: value, companyName: options.key })
    const { responseCode } = await requestSwitch({ companyId: value, companyName: options.key })
    if (responseCode === HttpCodeEnum.SUCCESS) {
      //requestPlatformCompanyInit({})
      window.location.reload()
    }
  }

  const modalPersonal = reactive({ visible: false })
  const modalPassword = reactive({ visible: false })

  onMounted(() => {
    getWebsitCompanyInfo()
    getPersonalData()
    window.addEventListener('setItemEvent', function (e: any) {
      if (e.key === 'companyInfo') {
        companyId.value = JSON.parse(e.newValue).companyId
      }
      if (e.key === 'companyList') {
        companyList.value = JSON.parse(e.newValue)
      }
    })
  })

  /** 选中模块 */
  const checkModule = (i: number) => menu.setActive(i)

  const confirm = async () => {
    const { responseCode } = await requestLoginOut({})
    if (responseCode === HttpCodeEnum.SUCCESS) {
      saveToken('')
      router.push(RouterPathEnum.LOGIN)
    }
  }

  /** 获取用户信息 */
  const getPersonalData = async () => {
    const { companyId } = getCompanyInfo()
    const { responseCode, responseData } = await requestPersonalData({ companyId })
    if (responseCode === HttpCodeEnum.SUCCESS) {
      data.value = responseData
      savePersonData(responseData)
    }
  }
  /** 主站点跳转-获取companyInfo */
  const getWebsitCompanyInfo = () => {
    const id = router.currentRoute.value.query.companyId as any
    const name = router.currentRoute.value.query.companyName as any
    const companyInfo = {
      companyId: Number(id),
      companyName: name,
    }
    id && saveCompanyInfo(companyInfo)
  }

  const ellipsis = (text: string, maxLength: number) => {
    if (text.length > maxLength) {
      return text.substr(0, maxLength - 3) + '...'
    }
    return text
  }
</script>

<template>
  <div class="header">
    <img class="logo" :src="HeaderImgEnum.LOGO" />
    <div class="menu">
      <div class="menu-item" :class="menu.activeNo === i ? 'active' : ''" v-for="(item, i) in menu.menus" :key="`menu-item${i}`" @click="checkModule(i)">{{ item.name }}</div>
    </div>
    <div class="handler">
      <a-select class="company" v-model:value="companyId" @change="changeCompany" :bordered="false" placeholder="">
        <a-select-option v-for="item in companyList" :key="item.companyName" :value="item.companyId">{{ item.companyName }}</a-select-option>
      </a-select>
      <img class="question" :src="HeaderImgEnum.QUESTION" />
      <img class="message" :src="HeaderImgEnum.MESSAGE" />
      <div class="user">
        <a-dropdown>
          <a class="ant-dropdown-link" @click.prevent>
            <img class="user-img" :src="HeaderImgEnum.USER" />
            <span class="user-name">{{ ellipsis(data.userName, 12) }}</span>
          </a>
          <template #overlay>
            <a-menu>
              <a-menu-item>
                <a href="javascript:;" @click="modalPersonal.visible = true">个人信息</a>
              </a-menu-item>
              <a-menu-item>
                <a href="javascript:;" @click="modalPassword.visible = true">修改密码</a>
              </a-menu-item>
              <a-menu-item>
                <a-popconfirm placement="leftBottom" ok-text="确定" cancel-text="取消" @confirm="confirm">
                  <template #title>
                    <p>退出确认</p>
                    <p class="w-[200px]">确认要退出系统吗</p>
                  </template>
                  <a href="javascript:;">账号退出</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </div>
      <img class="setting" :src="HeaderImgEnum.SETTING" />
    </div>
    <Personal v-model:visible="modalPersonal.visible" />
    <Password v-model:visible="modalPassword.visible" />
  </div>
</template>

<style lang="less" scoped>
  .header {
    position: relative;
    height: 60px;
    background: linear-gradient(90deg, #002329 0%, #006d75 100%);
    box-shadow: 0 2px 6px 0 rgb(0 0 0 / 20%);
  }

  .logo {
    position: absolute;
    top: 14px;
    left: 24px;
    width: 124px;
    height: 32px;
  }

  .menu {
    position: absolute;
    top: 0;
    left: 220px;
    display: flex;
    height: 60px;

    .menu-item {
      min-width: 64px;
      height: 60px;
      text-align: center;
      line-height: 60px;
      font-size: 16px;
      color: rgb(255 255 255 / 65%);
      cursor: pointer;

      &:not(:first-child) {
        margin-left: 32px;
      }

      &.active {
        color: #fff;
        border-bottom: 2px solid #fff;
      }
    }
  }

  .handler {
    position: absolute;
    top: 12px;
    right: 24px;
    display: flex;
    align-items: center;

    .question {
      margin-right: 20px;
      width: 16px;
      height: 16px;
      cursor: pointer;
    }

    .company {
      margin-right: 20px;
      height: 32px;
      cursor: pointer;
      color: #fff;

      :deep(.ant-select-arrow) {
        color: #fff;
      }

      :deep(.ant-select-selector) {
        padding: 0 32px;
      }
    }

    .message {
      margin-right: 20px;
      width: 16px;
      height: 16px;
      cursor: pointer;
    }

    .user {
      margin-right: 20px;
      height: 26px;
      display: flex;
      align-items: center;

      .user-img {
        width: 26px;
        height: 26px;
      }

      .user-name {
        margin-left: 8px;
        color: #fff;
      }
    }

    .setting {
      width: 16px;
      height: 16px;
      cursor: pointer;
    }
  }
</style>
